<template>
  <div class="list-item-container">
    <el-row :gutter="5">
      <el-col :span="22">
        <el-row :gutter="5" :key="index" v-for="(item, index) in items">
          <el-col :span="calcSpan" v-for="(column, inx) in props.columns">
            <el-input v-model="item[column.key]" :placeholder="column.placeholder"></el-input>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="2">
        <el-button @click="add">+</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import {useI18n} from 'vue-i18n'
import useAppStore from '@/store/modules/app'
import {RechargeItemBo} from '@/api/business/recharge/types'
const appStore = useAppStore()
const { t } = useI18n()

const props = defineProps({
  modelValue: propTypes.array.def([]),
  columns: propTypes.array.def([])
})


const calcSpan = computed(() => {
   return 24/props.columns.length
})

const items = ref<RechargeItemBo[]>([])

watch(() => props.modelValue,
  (newV) => {
    if(newV) {
      console.log(newV)
      if(newV.length == 0) {
        items.value.push({})
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
)

const add = () => {
  items.value.push({})
}
// 成功回调
const handleOk = () => {

}

</script>

<style scoped>

.list-item-container{
  width: 100%;
}

</style>
